<template>
    <div class="PageOne">
        <h1>这是页面1</h1>
        <el-table
                :data="tableData"
                border
                style="width: 100%">
            <el-table-column
                    prop="id"
                    label="id"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="书名"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="author"
                    label="作者"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="public"
                    label="出版社"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="页数"
                    width="300">
            </el-table-column>
            <el-table-column
                    prop="zip"
                    label="价格"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="书柜号"
                    width="300">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                <template slot-scope="scope">
                    <el-button @click="editBook(scope.row)" type="text" size="small">修改</el-button>
                    <el-button @click="deleteBook(scope.row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--    分页  vue组件中只能有一个根节点,因此要放在div里面-->
        <el-pagination
                background
                layout="prev, pager, next"
                :page-sizes="pageSize"
                :total="total"
                @current-change="page">
        </el-pagination>
    </div>

</template>

<script>
    export default {
        methods: {
            editBook(row) {
                this.$router.push({
                    path: '/update',
                    query: {   //将参数传过去（修改book）
                        id: row.id
                    }
                })
            }, deleteBook(row) {
                const _this = this
                axios.delete('http://localhost:8181/book/deleteById/' + row.id).then(function (resp) {
                    _this.$alert(row.name + '删除成功！', '消息', {
                        confirmButtonText: '确定',
                        callback: action => {
                            //删除之后，动态刷新
                            window.location.reload()
                        }
                    })

                })
            }
            , page(currentPage) {
                const _this = this
                //回调函数     结果
                //分页是动态的
                axios.get("http://localhost:8181/book/findAll/" + currentPage + "/20").then(function (resp) {
                    _this.tableData = resp.data.content  //表数据
                    //页码信息
                    _this.pageSize = resp.data.size
                    _this.total = resp.data.totalElements
                })
            }
        },
        created() {
            //由于this在回调函数里面，指的是回调函数本身不能直接用；因此要定义_this，让它来调tableData
            // created（）页面初始化时调用  默认显示第一页、9条数据。
            const _this = this
            //回调函数     结果
            axios.get("http://localhost:8181/book/findAll/1/9").then(function (resp) {
                _this.tableData = resp.data.content  //表数据
                _this.pageSize = resp.data.size
                _this.total = resp.data.totalElements
            })
        },
        data() {
            return {
                pageSize: 1,
                total: null,
                tableData: null
            }
        }
    }
</script>